<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="事件/活动名称" name="name">
          <a-input v-model:value="detailData.name" disabled />
        </a-form-item>
        <a-form-item label="封面" name="cover">
          <upload-image
            :image-str="detailData.cover"
            :component-props="{ maxCount: 1, disabled: true }"
          />
        </a-form-item>
        <a-form-item label="地点">
          <div class="flex justify-between">
            <a-input v-model:value="detailData.address" class="m-r-4" disabled />
            <a-input v-model:value="detailData.detailedAddress" disabled />
          </div>
        </a-form-item>
        <a-form-item label="轮播图片" name="images">
          <upload-image
            :image-str="detailData.images"
            :component-props="{ maxCount: 3, disabled: true }"
          />
        </a-form-item>
        <a-row :gutter="1">
          <a-col :span="2"> </a-col>
          <a-col :span="10">
            <!--            <div class="inline-flex items-center whitespace-nowrap">-->
            <span class="pr-8px">事件/活动类型:</span>
            <a-select
              v-model:value="detailData.type"
              class="min-w-150px"
              allow-clear
              :options="typeList"
              placeholder="请选择事件/活动类型"
              disabled
            ></a-select>
            <!--            </div>-->
          </a-col>
          <a-col :span="10">
            <a-form-item label="排序" name="sort">
              <a-input v-model:value="detailData.sort" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="1">
          <a-col :span="2"> </a-col>
          <a-col :span="10">
            <a-form-item label="开始时间" name="startTime">
              <a-date-picker
                :value="formatToDateTime(detailData.startTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="结束时间" name="endTime">
              <a-date-picker
                :value="formatToDateTime(detailData.endTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-col :span="24">
          <a-form-item
            label="介绍"
            name="introduce"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <tinymce-editor
              v-model:value="detailData.introduce"
              placeholder="详细介绍"
              disabled
            ></tinymce-editor>
          </a-form-item>
        </a-col>
        <a-row :gutter="1">
          <a-col :span="2"> </a-col>
          <a-col :span="10">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="更新时间" name="updateTime">
              <a-date-picker
                :value="formatToDateTime(detailData.updateTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button
              v-if="$auth('event-activity-update')"
              class="mr-50px"
              type="primary"
              @click="router.push(`/eventActivity/eventActivityEdit?id=${detailData.id}`)"
              >编辑</a-button
            >
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { eventActivityApi, createEventActivity, updateEventActivity } from '@/api/eventActivity';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { categoryJsonByType } from '@/api/category';
  import { categoryTypeEnum } from '@/enums/categoryTypeEnum';

  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const router = useRouter();
  const tabsViewStore = useTabsViewStore();
  const typeList = ref<{ id: number; name: string }[]>([]);
  const { detailData, loading } = useRequestDetail({
    apiKey: eventActivityApi.eventActivityDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const eventActivityId = route?.query?.id;
    const res = eventActivityId
      ? await updateEventActivity({
          ...params,
          id: eventActivityId,
        })
      : await createEventActivity(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const getCategoryList = async () => {
    const res = await categoryJsonByType({ type: categoryTypeEnum.ACTIVITY });
    if (res) {
      typeList.value = res.data.map((item: { name: string; id: number }) => ({
        label: item.name,
        value: item.id,
      }));
    }
  };

  onMounted(() => {
    getCategoryList();
  });
</script>

<style></style>
